<template>
  <section class="profile">
    <HeaderTop title="个人中心" />
    <section class="profile-number">
      <router-link class="profile-link" :to="userLogin._id?'/personal':'/login'">
        <div class="profile_image">
          <i class="iconfont icon-geren"></i>
        </div>
        <div class="user-info">
          <p class="user-info-top" v-if="userLogin._id">{{userLogin._id || '登录/注册'}}</p>
          <p>
                <span class="user-icon">
                  <i class="iconfont icon-iconfont-zhutizuizhong_huaban icon-mobile"></i>
                </span>
            <span class="icon-mobile-number">{{userLogin.phone || '暂无绑定手机号' }}</span>
          </p>
        </div>
        <span class="arrow">
              <i class="iconfont icon-fasong"></i>
            </span>
      </router-link>
    </section>
    <section class="profile_info_data border-1px">
      <ul class="info_data_list">
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0.00</span>元</span>
          <span class="info_data_bottom">我的余额</span>
        </a>
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0</span>个</span>
          <span class="info_data_bottom">我的优惠</span>
        </a>
        <a href="javascript:" class="info_data_link">
          <span class="info_data_top"><span>0</span>分</span>
          <span class="info_data_bottom">我的积分</span>
        </a>
      </ul>
    </section>
    <section class="profile_my_order border-1px">
      <!-- 我的订单 -->
      <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-dingdan"></i>
            </span>
        <div class="my_order_div">
          <span>我的订单</span>
          <span class="my_order_icon">
                <i class="iconfont icon-fasong"></i>
              </span>
        </div>
      </a>
      <!-- 积分商城 -->
      <a href='javascript:' class="my_order">
            <span>
              <i class="iconfont icon-jifenshangcheng"></i>
            </span>
        <div class="my_order_div">
          <span>积分商城</span>
          <span class="my_order_icon">
                <i class="iconfont icon-fasong"></i>
              </span>
        </div>
      </a>
      <!-- 硅谷外卖会员卡 -->
      <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-membership-card_icon"></i>
            </span>
        <div class="my_order_div">
          <span>硅谷外卖会员卡</span>
          <span class="my_order_icon">
                <i class="iconfont icon-fasong"></i>
              </span>
        </div>
      </a>
    </section>
    <section class="profile_my_order border-1px">
      <!-- 服务中心 -->
      <a href="javascript:" class="my_order">
            <span>
              <i class="iconfont icon-fuwu"></i>
            </span>
        <div class="my_order_div">
          <span>服务中心</span>
          <span class="my_order_icon">
                <i class="iconfont icon-fasong"></i>
              </span>
        </div>
      </a>
    </section>
    <button v-if="userLogin._id" style="width: 95%;background: red;border: none;margin: .375rem;color: #fff;font-size: .6rem;" @click="loginout">退出登陆</button>
  </section>
</template>

<script>
  import HeaderTop from '../../components/Header/Header.vue'
  import {mapState} from 'vuex';
  import { MessageBox } from 'mint-ui'

  export default {
    components: {
      HeaderTop
    },
    computed:{
      ...mapState(['userLogin'])
    },
    methods:{
      loginout(){
        MessageBox.confirm('确定执行此操作?').then(action => {
          this.$store.dispatch('getLogout')
        });
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../common/stylus/minxins.styl"
  .profile //我的
    width 100%
    overflow hidden
    .header
      background-color #ff4700
      position fixed
      z-index 100
      left 0
      top 0
      width 100%
      height 1.688rem
      .header_search
        position absolute
        left .563rem
        top 50%
        transform translateY(-50%)
        width 10%
        height 50%
        .icon-sousuo
          font-size .938rem
          color #fff
      .header_title
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        width 50%
        color #fff
        text-align center
        .header_title_text
          font-size .75rem
          color #fff
          display block
      .header_login
        font-size .525rem
        color #fff
        position absolute
        right .563rem
        top 50%
        transform translateY(-50%)
        .header_login_text
          color #fff
    .profile-number
      margin-top 1.7rem
      .profile-link
        clearFix()
        position relative
        display block
        background -webkit-radial-gradient(#FF4700, #DE9B22)
        background -ms-radial-gradient(#FF4700, #DE9B22)
        background -moz-radial-gradient(#FF4700, #DE9B22)
        background radial-gradient(#FF4700, #DE9B22)
        padding .75rem .375rem
        .profile_image
          float left
          width 2.25rem
          height 2.25rem
          border-radius 50%
          overflow hidden
          vertical-align top
          .icon-geren
            background #e4e4e4
            font-size 2.325rem
        .user-info
          float left
          margin-top .3rem
          margin-left .563rem
          p
            font-weight: 700
            font-size .675rem
            color #fff
            &.user-info-top
              padding-bottom .3rem
            .user-icon
              display inline-block
              margin-left -.563rem
              margin-right .188rem
              width .75rem
              height .75rem
              .icon-mobile
                font-size 1.125rem
                vertical-align text-top
            .icon-mobile-number
              font-size .525rem
              color #fff
        .arrow
          width .45rem
          height .45rem
          position absolute
          right .563rem
          top 40%
          .icon-fasong
            color #fff
            font-size 5px
    .profile_info_data
      bottom-border-1px(#e4e4e4)
      width 100%
      background #fff
      overflow hidden
      .info_data_list
        clearFix()
        .info_data_link
          float left
          width 33%
          text-align center
          border-right 1px solid #f1f1f1
          .info_data_top
            display block
            width 100%
            font-size .525rem
            color #333
            padding .563rem .188rem .375rem
            span
              display inline-block
              font-size 1.125rem
              color #f90
              font-weight 700
              line-height 1.125rem
          .info_data_bottom
            display inline-block
            font-size .525rem
            color #666
            font-weight 400
            padding-bottom .375rem
        .info_data_link:nth-of-type(2)
          .info_data_top
            span
              color #ff5f3e
        .info_data_link:nth-of-type(3)
          border 0
          .info_data_top
            span
              color #6ac20b
    .profile_my_order
      top-border-1px(#e4e4e4)
      margin-top .375rem
      background #fff
      .my_order
        display flex
        align-items center
        padding-left .563rem
        >span
          display flex
          align-items center
          width .75rem
          height .75rem
          >.iconfont
            margin-left -.375rem
            font-size 1.125rem
          .icon-dingdan
            color #02a774
          .icon-jifenshangcheng
            color #ff5f3e
          .icon-membership-card_icon
            color #f90
          .icon-fuwu
            color #02a774
        .my_order_div
          width 100%
          border-bottom .0375rem solid #f1f1f1
          padding .8rem .375rem .675rem
          font-size .6rem
          color #333
          display flex
          justify-content space-between
          span
            display block
          .my_order_icon
            width .375rem
            height .375rem
            .icon-fasong
              color #bbb
              font-size .375rem
</style>
